<template>
    <div class="main">
        <!-- 将main盒子的背景做成地图样式 -->
        <div class="map1"></div>
        <div class="map2"></div>
        <div class="map3"></div>
        <!-- <img src="../../statis/images/login.jpg" alt=""> -->
        <a-form id="components-form-demo-normal-login" :form="form" class="login-form" @submit="handleSubmit">
            <h3 class="login_title">系统登录</h3>
            <a-form-item>
                <a-input v-decorator="[
                    'userName',
                    { rules: [{ required: true, message: '请输入用户名!' }] },
                ]" placeholder="用户名">
                    <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
                </a-input>
            </a-form-item>
            <a-form-item>
                <a-input v-decorator="[
                    'password',
    { rules: [{ required: true, message: '请输入密码!' }] },
                ]" type="password" placeholder="密码">
                    <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                </a-input>
            </a-form-item>
            <a-form-item>
                <a-checkbox style="color:white">
                    记住我
                </a-checkbox>
                <a class="login-form-forgot" href="">
                    忘记密码
                </a>
                <a-button type="primary" html-type="submit" class="login-form-button">
                    登录
                </a-button>

                <a href="">
                    现在注册!
                </a>
            </a-form-item>
        </a-form>
    </div>
</template>

<script>

export default {
    // inject: ['reload'],
    beforeCreate() {
        this.form = this.$form.createForm(this, { name: 'normal_login' });
    },
    methods: {
        handleSubmit(e) {
            //e.preventDefault();
            let that = this;
            this.form.validateFields((err, values) => {
                if (!err) {
                    this.$store.dispatch('login', values)
                    this.$store.commit('getToken')
                    const Token = this.store.state.login.token
                    // console.log(Token)
                    if (Token !== "") {
                        this.$router.push({ name: 'home' })
                    } else {
                        this.$message.warning("账号或密码错误")
                    }
                }


            });
        },

    },
};
</script>

<style lang="less" scoped>





#components-form-demo-normal-login .login-form {
    max-width: 300px;
}

#components-form-demo-normal-login .login-form-forgot {
    float: right;
}

#components-form-demo-normal-login .login-form-button {
    width: 100%;
}

.main {
    height: 100%;
    // margin: -180px;
    display: flex;
    // background-color: pink;
    //padding: 180px auto;
    background-image: url("../../statis/images/bg.jpg");
    background-size: 100%;
    // opacity: 0.9;
    position: relative;
    overflow: hidden; //超出部分进行隐藏

}

.map1 {
    width: 35.475rem;
    height: 35.475rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../../statis/images/map.png);
    background-size: 100% 100%;
    opacity: 0.3;
    // background-color: pink;
}

.map2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 43.475rem;
    height: 43.475rem;
    background: url(../../statis/images/lbx.png);
    animation: rotate1 15s linear infinite;
    opacity: 0.6;
    background-size: 100% 100%;
    // background-color: pink;
}

.map3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38.475rem;
    height: 38.475rem;
    background: url(../../statis/images/jt.png);
    animation: rotate2 10s linear infinite;
    opacity: 0.6;
    background-size: 100% 100%;
    // background-color: pink;
}

@keyframes rotate1 {
    form {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes rotate2 {
    form {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

.login-form {

    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    //background-color: #fff;
    border: 1px solid #3250d7;
    opacity: 0.8;
    //box-shadow:0 025px #cac6c6;
}

.login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: white;
}

.login_submit {
    margin: 10px auto 0px auto;
}
</style>